<template>
  <div class="lists-container">
    <div class="lists-nav-container">
      <div class="lists-nav">
        <!-- 全部 、1待发货、2已发货 -->
        <section :class="!listParams.status?'cur':''" @click="clickListsNav()">所有订单<i></i></section>
        <section :class="listParams.status==1?'cur':''" @click="clickListsNav(1)">待发货<i></i></section>
        <section :class="listParams.status==2?'cur':''" @click="clickListsNav(2)">已发货<i></i></section>
      </div>
    </div>
    <div class="order-wrapper" v-if="listsData.length>0">
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text=""
        @load="onLoad"
      >
      <div class="order-box" v-for="(listsItem,index) in listsData" :key="index">
        <section class="order-list-info clearfix">
          <span class="fl">
            <p>订单：{{listsItem.order_no}}</p>
            <p>日期：{{listsItem.create_time}}</p>
          </span>
          <span class="status">{{listsItem.status_name}}</span>
        </section>
      
        <section class="order-goods">
          <ul>
            <li
              v-for="(goods,index) in listsItem.order"
              :key="index"
              class="goods-li"
            >
              <section class="order-goods-img" @click="JumpName('item-detail',{detailId:goods.item_id})">
                <a>
                  <img :src="goods.pic_url+'160x160'" width="80" height="80" v-if="goods.is_compress==1"/>
                  <img :src="goods.pic_url" width="80" height="80" v-else/>
                </a>
              </section>
              <section class="order-goods-infor g-flex">
                <div class="left">
                  <a href="javascript:;" class="goods-title">
                    <span class="fontZiy" v-if="goods.is_self_support == 1">自营</span>{{goods.title}}</a>
                  <p class="goods-props" v-if="goods.sku_name">{{goods.sku_name}}</p>
                  <p class="price" v-html="scaleGoodsPriceFn(goods.current_price)"></p>
                </div>
                <div class="right">
                  <span class="num fr"><i>x</i>{{goods.num}}</span>
                </div>
              </section>
            </li>
          </ul>
        </section>

        <section class="order-pay">
          <div class="good-price-box">
            <span>
              总价：<span class="good-total-price fontGilroy"><i>&yen;</i> <em>{{listsItem.total_fee}}</em></span>
            </span>
            <span style="margin-left:6px;">
              实付款：<span class="good-discount-price fontGilroy"><i>&yen;</i> <em>{{listsItem.payment}}</em></span>
            </span>
          </div>
          <div class="good-more-btn">
            <van-button  class="btn orange-btn" v-if="listsItem.status && listsItem.status == 1" @click="markDelivery(listsItem)" round hairline>标记发货</van-button>
            <van-button href="javascript:;" class="btn" @click="JumpName('order-detail',{id:listsItem.order_id,page:listsItem.page,label_type:listsItem.type})" round hairline>详情</van-button>
          </div>
        </section>
      </div>
      </van-list>
    </div>
    <div v-else>
      <no-data :noData="noData"></no-data>
    </div>
    <!-- 标记发货弹窗 -->
    <van-popup
			v-model="showSendBox"
			close-on-click-overlay
      :show-confirm-button="false"
			class="custom-dialog"
      @close="clickClearSend"
		>
			<div class="dialog-box">
				<div class="con-box">
					<div class="title-box">
						<div>标记发货</div>
					</div>
					<div class="input-box clearfix">
						<label for="" class="fl">物流公司：</label>
            <select name="express" class="fl" v-model="sendForm.express">
              <option value="-1">请选择</option>
              <option v-for="(expressItem, index) in expressLists" :key="index" :value="index" >{{expressItem}}</option>
            </select>
					</div>
					<div class="input-box clearfix">
						<label for="" class="fl">快递单号：</label><input type="text" name="point" class="fl" v-model="sendForm.express_no"/>
					</div>
				</div>
        <div class="btn-box">
          <a href="javascript:;" class="btn cancel-btn" @click="clickCloseSend">取消</a>
          <a href="javascript:;" class="btn confirm-btn" @click="clickConfirmSend">确定</a>
        </div>
			</div>
		</van-popup>
  </div>
</template>

<script>
import noData from '@/components/noData/index'

import { scaleGoodsPrice } from '@/utils/index.js'
import { dhsEntityOrder, sendEntityOrder } from '@/api/user/dhs/dhsApi'
import Vue from 'vue'
export default Vue.extend({
  name: 'index',
  components: {
    noData
  },
  data() {
    return {
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_order.png',
        text: '暂无订单',
        marginTop: '60px'
      },
      loading: false,
      error: false,
      finished: false,
      listParams: {
        page_size: '', // 默认10
        page_no: 1,
        status: '', // 0全部 、1待发货、2已发货
        order_no: '' // 搜索关键词
      },
      listsData: [],
      // 标记发货
      expressLists: {},
      showSendBox: false,
      sendForm: {
        express: '-1',
        express_name: '',
        express_no: ''
      },
      sendId: ''
    }
  },
  created() {
    this.init()
    const that = this
    this.$Bus.$on('keywordEvent', function(option) {
      that.listParams.order_no = option.keyword
      that.init()
    })
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener("reachbottom", () => {
      this.onLoad()
    })
  },
  methods: {
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    JumpName(name, data) {
      this.$JumpName(this, name, data)
    },
    init() {
      this.listsData = []
      this.listParams.page_no = 1
      this.finished = false
      this.loading = false
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      dhsEntityOrder(this.listParams).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          this.expressLists = resData.express
          this.listsData = resData.order_list
          this.listParams.page_no++
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 加载更多
    onLoad() {
      dhsEntityOrder(this.listParams).then(res => {
        this.loading = false
        if (res.data && res.data.order_list && res.data.order_list.length > 0) {
          this.listsData.push(...res.data.order_list)
          this.listParams.page_no++
        } else {
          this.finished = true
        }
      }).catch(() => {
        this.error = true
      })
    },
    // 标记发货
    markDelivery(item) {
      this.sendId = item.order_id
      this.showSendBox = true
    },
    // 门店发货点击确定
    clickConfirmSend() {
      this.sendForm.express_name = this.expressLists[this.sendForm.express]
      if (this.sendForm.express <= 0) {
        this.$Error('请选择物流公司')
        return false
      }
      if (!this.sendForm.express_no) {
        this.$Error('请填写快递单号')
        return false
      }

      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      const params = {
        id: this.sendId,
        express: this.sendForm.express,
        express_name: this.sendForm.express_name,
        express_no: this.sendForm.express_no
      }
      sendEntityOrder(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.showSendBox = false
          this.$Error('操作成功')
          this.init()
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 门店发货点击取消
    clickCloseSend() {
      this.showSendBox = false
    },
    // 门店发货弹窗关闭清空数据
    clickClearSend() {
      this.sendForm.express = '-1'
      this.sendForm.express_name = ''
      this.sendForm.express_no = ''
    },
    // 切换订单
    clickListsNav(id) {
      this.listParams.page_no = 1
      this.listParams.status = id
      this.init()
    }
  }
})
</script>
<style lang="scss">
@import "src/styles/order/lists";
.lists-container{
  .lists-nav-container{
    position:fixed;
    top:108px;
    left:0;
    z-index:3;
    width:100%;
    padding:0;
  }
  .custom-dialog{
    width:640px;
    border-radius:20px;
    .con-box{
      padding:50px;
    }
    .title-box{
      margin-bottom:40px;
      font-size:32px;
      text-align:center;
      color:#333;
    }
    .input-box{
      margin-bottom:20px;
      font-size:28px;
      color:#666;
      &:last-child{
        margin-bottom:0;
      }
      label{
        display:inline-block;
        font-size: 28px;
        color: #666;
        width:180px;
        height:76px;
        line-height:76px;
        text-align:right;
        font-weight:normal;
      }
      input,select{
        position:relative;
				float:left;
				-webkit-appearance: none;
        width:320px;
				height:64px;
				padding:16px 20px;
        font-size:26px;
				border:2px solid #EDEDED;
				border-radius:6px;
      }
    }
    .btn-box{
      display:flex;
      border-top:2px solid #ededed;
      .btn{
        width:50%;
        font-size:28px;
        line-height:94px;
        text-align:center;
        color:#333;
        &.confirm-btn{
          border-left:2px solid #ededed;
          color:#f20b22;
        }
      }
    }
  }
}
</style>
